layui.define(["form","jquery"], function (exports) {
	var $ = layui.jquery,
	form = layui.form,
	Dropmultiselect = function () {
		this.config = {
			elem: "",
			url:"",
			data: "",
			where:"",
			checked:'',
			datatype:'checkbox',
			type: "GET",
			separator:',',
			inputName:'',
			callback: "",
			placeholder: "请选择",
			readonly:true,
			skin:"",
			val: "id"
		}
	};
	Dropmultiselect.prototype.set = function (option) {
		var t = this;
		$.extend(true, t.config, option);
		t.config.checked = option.checked?option.checked:'';
		t.config.callback = option.callback;
		return t.config;
	},
	Dropmultiselect.prototype.init = function (t) {
		var val1=[],
			val2=[],
			datas=[],
			elem = t.elem,
			datatype = t.datatype,
			readonly = t.readonly,
			inputName = t.inputName,
			placeholder = t.placeholder,
			separator = t.separator,
			skin = t.skin,
			checked = t.checked,
			callback = t.callback,
			sid = "drop-select-" + new Date().getTime() + Math.floor(Math.random() * 100),
			uid = "dropmultiselect-" + new Date().getTime() + Math.floor(Math.random() * 100),
			iid = "drop-input-" + new Date().getTime() + Math.floor(Math.random() * 100),
			filter="drop-filter-" + new Date().getTime() + Math.floor(Math.random() * 100);
		$(elem).hide();
		var selectHtml = '<div class="layui-unselect layui-form-select">' + '<div class="layui-select-title" id="'+sid+'">' + ' <input name="'+inputName+'" type="text" id="'+iid+'" placeholder="' + placeholder + '" value="" ' + (readonly?'readonly':'') + ' class="layui-input layui-unselect"'+(readonly?'':' style="cursor:inherit;"')+'>' + '<i class="layui-edge"></i>' + "</div>" + '<ul class="layui-anim layui-drop-anim layui-anim-upbit ' + skin + '" id="'+uid+'"></ul></div>';
		$(elem).parent().append(selectHtml);
		var div = "#" + sid;
		var item = "#" + uid;
		var $input = '#'+iid;
		for(var i=0;i<t.data.length;i++){
			var li =$('<li></li>');
			$(li).data(t.data[i]);
			var input ='<input type="'+datatype+'" name="'+filter+'" lay-skin="primary" lay-filter="'+filter+'" title="'+t.data[i].name+'" value="'+t.data[i].name+'"';
			if(datatype == "radio"){
				if(checked.length>1){
					console.error('单选框选择值只能是单个');
					return false;
				}
			}
			for(var x=0;x<checked.length;x++){
				if(t.data[i].id == checked[x] ||t.data[i].name == checked[x]){
					input+=' checked';
					val1.push(t.data[i].name);
					datas.push(t.data[i]);
					if(readonly){
						val2.push(t.data[i][t.val]?t.data[i][t.val]:t.data[i]['name']);
					}else{
						val2.push(t.data[i].name);
					}
				}
			}
			input+='>';
			li.append(input);
			$(item).append(li);
		}
		$($input).val(val1.length>0?val1.join(separator):'');
		$(elem).val(val2.length>0?val2.join(separator):'');
		form.render();
		$('body').on("click",div,function(e){
			if($(this).parent().hasClass('layui-form-selected')) {
				$(this).parent().removeClass('layui-form-selected');
			} else {
				$(".layui-form-select").removeClass('layui-form-selected');
				$(this).parent().addClass('layui-form-selected');
			}
			e.stopPropagation();
		});
		$("body").on("click",'.layui-drop-anim',function(e){
			e.stopPropagation();
		})
		$(elem).data(datas);
		if(datatype == "checkbox"){
			form.on('checkbox('+filter+')', function(data){
				readonly = $($input).attr('readonly')?true:false;
				var o = data.othis.parent().data();
				val1 = $.trim($($input).val());
				val2 = $.trim($(elem).val());
				val1 = val1.length>0?val1.split(separator):[];
				val2 = val2.length>0?val2.split(separator):[];
				if(data.elem.checked){
					val1.push(data.value);
					datas.push(o);
					if(readonly){
						val2.push(o[t.val]?o[t.val]:o['name']);
					}else{
						val2.push(data.value);
					}
				}else{
					val1.splice($.inArray(data.value,val1),1);
					for(var i=0;i<datas.length;i++){
						if(datas[i][t.val] == o[t.val]){
							datas.splice(i,1);
						}
					}
					if(readonly){
						val2.splice($.inArray(o[t.val],val2),1);
					}else{
						val2.splice($.inArray(data.value,val2),1);
					}
				}
				$($input).val(val1.length>0?val1.join(separator):'');
				$(elem).val(val2.length>0?val2.join(separator):'');
				if(readonly){
					$(elem).data(datas);
				}
				var opt = {
					value:{data:datas,id:val2,name:val1},
					checked:data.elem.checked,
					elem:elem
				}
				if(callback){
					callback(opt);
				}
			});
		}
		if(datatype == "radio"){
			form.on('radio('+filter+')', function(data){
				var o = data.othis.parent().data(),
				val1 = data.value,
				val2 = o[t.val]?o[t.val]:o['name'];
				$($input).val(val1);
				$(elem).val(val2);
				$(elem).data(o);
				var opt = {
					value:{data:o,id:val2,name:val1},
					checked:data.elem.checked,
					elem:elem
				};
				if(callback){
					callback(opt);
				}
			});
		}
		if(!readonly){
			var falg = false;
			$($input).keydown(function(){
				falg = true;
			});
			$($input).blur(function(){
				if(falg){
					$(elem).val($($input).val());
					if(callback){
						var opt = {
							value:{name:$.trim($(elem).val()).length>0?$.trim($(elem).val()).split(separator):[]},
							checked:'',
							input:true,
							elem:elem
						}
						callback(opt);
					}
				}
			});
		}
	},
	Dropmultiselect.prototype.render = function (option) {
		var obj = new Dropmultiselect();
		var t = obj.set(option);
		var elem = t.elem;
		if(t.url){
			$.ajax({
				type:t.type,
				url: t.url,
				data:t.where,
				success:function(data){
					t.data = data;
					t.elem= elem;
					obj.init(t);
				},
				error:function(data){
					console.log('error');
				},
				dataType:'json'
			});
		}else{
			obj.init(t);
		}
	};
	var mod = new Dropmultiselect();
	exports('dropmultiselect', mod);
})
/*dropmultiselect.render({
	elem: "#multiselect1", //#id
	url:"", //ajax数据请求地址；返回格式[{"name": "南明区"},{"name": "云岩区"}],如果有数据有id则是：[{"name": "南明区",id:1},{"name": "云岩区",id:2}]
	data: "", // 没有使用ajax请求数据时可以直接使用此配置数据，格式同ajax返回的格式
	where:"", //使用ajax请求时的额外参数
	checked:'', //默认选中，格式[1,2];ruo没有id则：['南明区']
	type: "GET", //请求方法，默认GET
	separator:',', //数据值连接符，如：南明区,云岩区。默认','
	inputName:'', //美化后input的name
	callback: "", //回调函数
	placeholder: "请选择", //提示文字
	readonly:true, //是否只读；true为只读（不可输入）,false为可输入
	skin:"", //额外的样式
	val: "id" //原始input的值类型；[{"name": "南明区",id:1}],数据中有id时可设为取id，没有则一律为name
});*/